<template>
  <div class="mygift" ref="mygiftWrapper">
    <div class="scroll">
    <ul>
      <li class="gift-me-list border-1px" v-for="(item,$index) in detailGifts" :key="$index">
        <div class="img">
          <img width="100%" height="100%" :src="item.icon">
        </div>
        <div class="right">
          <h1 class="title">{{item.name}}</h1>
          <p class="message-font">{{item.sub_title}}</p>
        </div>
        <span class="btn-green" @click="receiveGift(item)">查看</span>
      </li>
    </ul>
    <v-footer v-if="showFooter"></v-footer>
    </div>
    <messagebox :gift-code="giftCode" :hasReceive="1" v-if="showMessageBox"></messagebox>
    <nomore v-if="noMoreGifts"></nomore>
    <loading-full></loading-full>
    <back></back>
  </div>
</template>

<script type="text/ecmascript-6">
  import giftlist from '../../common/giftlist/giftlist'
  import messagebox from '../../common/messagebox/messagebox'
  import back from '../../common/back/back'
  import nomore from '../../common/nomore/nomore'
  import LoadingFull from '../../common/loading-full/loading-full'
  import VFooter from '../../common/footer/footer'
  import BScroll from 'better-scroll'

  export default {
    data() {
      return {
        loadUrl: '',
        detailGifts: [],
        giftCode: '',
        showMessageBox: false,
        noMoreGifts: false,
        showFooter: false
      }
    },
    created() {
      this.$nextTick(() => {
        if (!this.giftScroll) {
          this.giftScroll = new BScroll(this.$refs.mygiftWrapper, {
            click: true
          })
        } else {
          this.giftScroll.refresh()
        }
      })

      this.$http.get('/game/index.php?m=Home&c=Api&a=getUserGifts').then((response) => {
        if (response.data.code === this.ERROR_OK) {
          this.detailGifts = response.data.data
          if (this.detailGifts.length === 0) {
            this.noMoreGifts = true
          } else {
            this.showFooter = true
          }
        }
      })
    },
    methods: {
      receiveGift(item) {
        //判断兑换码是否被使用
        this.$http.get(`/game/index.php?m=Home&c=Api&a=getCode&code_id=${item.id}`).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            this.giftCode = item.code
            this.showMessageBox = true
          } else {
            this.MessageBox('提示', '服务器繁忙，请稍后再试！')
          }
        })
      }
    },
    mounted() {
      this.eventBus.$on('copyOk', (status) => {
        this.showMessageBox = status
      })
    },
    components: {
      giftlist,
      messagebox,
      nomore,
      LoadingFull,
      VFooter,
      back
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../assets/stylus/mixin.styl"
  .mygift
    position absolute
    padding 0 24px
    top 0
    left 0
    width 100%
    height 100%
    background #fff
    z-index 10
    box-sizing border-box
    overflow hidden
    .gift-me-list
      position relative
      padding 24px 0
      width 100%
      display inline-flex
      border-1px(rgba(0, 0, 0, .2))
      &:last-child
        border-none()
      .img
        flex 0 0 112px
      .right
        margin-left 16px
        display flex
        flex-direction column
        .message-font
          display block
          margin-top 16px
          width 460px
          line-height 32px
</style>
